<template lang="pug">
  v-dialog(v-model="active" max-width="400px" persistent)
    v-card
      v-card-title {{ title }}
      v-card-text
        v-form(ref="form")
          v-container(grid-list-xl)
            v-layout(wrap)
              v-flex(xs12 md12)
                v-select(
                  label="资产类型"
                  :items="assetTypes"
                  item-value="key"
                  item-text="lbl"
                  v-model="criterion.asset_type"
                )
              v-flex(xs12 md12)
                v-select(
                  label="筛选类型"
                  :items="types"
                  item-value="key"
                  item-text="lbl"
                  v-model="criterion.field_name"
                )
              v-flex(xs12 md12)
                v-select(
                  label="匹配模式"
                  :items="matchTypes"
                  item-value="key"
                  item-text="lbl"
                  v-model="criterion.operator"
                )
              v-flex(xs12 md12)
                v-text-field(
                  label="匹配值"
                  v-model="criterion.field_value"
                )
              v-flex(xs12 md12)
                v-text-field(
                  label="数量"
                  type="number"
                  v-model="criterion.quantity"
                )

      v-card-actions
        v-spacer
        v-btn(text @click="cancel") 取消
        v-btn(text color="primary" @click="confirm") 确定
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import dialogMixin from '@/components/mixins/DialogMixin'
  import {mapActions, mapGetters} from 'vuex'

  export interface Criterion {
    asset_type: string,
    field_name: string,
    field_value: string,
    operator: string,
    quantity: number
  }
  const emptyCriterion = {
    asset_type: "App\\Models\\Asset",
    field_name: "name",
    field_value: "",
    operator: "=",
    quantity: 1
  }
  export default (Vue as VueConstructor<Vue & {}>).extend({
    mixins: [dialogMixin],
    props: ['bundle'],
    methods: {
      ...mapActions("filterableBundle", ['addCriterion']),
      reset(){
        return this.criterion = emptyCriterion
      },
      confirm(){
        let postData = {
          id: this.bundle.id,
          data: this.criterion
        }
        this.$loading()
        this.addCriterion(postData).then(()=>{
          this.$loading.close()
          this.$emit("refresh")
          this.close()
        })
      }

    },
    data() {
      return {
        criterion: emptyCriterion,
        matchTypes: [
          { key: '=', lbl: '等于' },
          { key: '!=', lbl: '不等于' },
          { key: 'like', lbl: '包含' },
          { key: 'not like', lbl: '不包含' },
          { key: '>', lbl: '大于' },
          { key: '<', lbl: '小于' }
        ],
        assetTypes: [
          { key: 'App\\Models\\Asset', lbl: '一般资产' },
          { key: 'App\\Models\\AssetStock', lbl: '批量资产' },
        ],
        types: [
          { key: 'name', lbl: '名称' },
          { key: 'category', lbl: '分类' },
        ],
        title: '创建资产筛选器'
      }
    }
  })
</script>


